{% extends "images/base.html" %}
{% block title %}{% endblock %}
{% block content_title %}{% endblock %}
{% block main %}
   <p>Это Индекс</p>
   <p><a href="{% url homesite.images.views.upload %}">Загрузить</a></p>


<style type="text/css">
.floats
{
padding-left:40px;
}


.floats
{
/* Компенсируем отступы между float-блоками, чтобы они занимали все доступное пространство */
margin: -2em 0 0 -1em;

/* Эти правила для IE */
position: relative;
display: inline-block;
clear: both;
}
.floats:after
{
content: '';
display: block;
clear: both;
}
.floats .left
{
position: relative;
float: left;

/* Убираем удвоение отступов в IE */
display: inline;

/* Прячем все, что вдруг вылезло за наши ограничения */
overflow: hidden;

/* Отсупы между float-блоками */
margin: 2em 0 0 1em;

/* Задаем минимальную ширину по картинке и тексту */
width: 10em;
min-width: 100px;
}
.floats .left .r
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.floats .left .min
{
/* Задаем минимальную высоту по картинке */
margin: 0 0 50px 0;

/* Задаем минимальную высоту по тексту */
height: 4em;

/* Дублируем значение минимальной ширины по картинке для IE */
width: 100px;
}
</style>
<h2>Новое</h2>
<div class="floats">
{% for image in img_list %}
<div class="left">
    <div class="r">
    {{ image.preview_image_url|safe }}<br />
    {{ image.title }}
    </div>
        <div class="min"></div>
</div>
   
{% endfor %}    
</div>


   



{% endblock %}
